<template>
  <div>
    <div class="content">
      <div class="content_top">
        <div class="content_left">
          <div class="content_left_tit">
            <img src="../../assets/img/tit_log.png" alt="" />
          </div>
          <video
            v-if="type == 1"
            ref="myVideo"
            @pause="videoPause"
            @play="videoPlay"
            controls
            style="width: 100%; height: 100%"
            :src="videoUrl"
          ></video>
          <div class="content_txt" v-if="type != 1">
            <div v-html="content"></div>
          </div>
          <div
            class="video_play"
            @click="videoPlay"
            v-if="videoPauseShow && type == 1"
          >
            <img src="../../assets/img/video_play.png" alt="" />
            <img src="../../assets/img/video_play_back.png" alt="" />
          </div>
        </div>
        <div class="content_right">
          <div class="content_right_tit">
            <p>播放列表</p>
            <img src="../../assets/img/list.png" alt="" />
          </div>
          <div class="content_right_list">
            <div
              v-for="(item, i) in list"
              :key="i"
              :class="
                active == i
                  ? 'content_right_list_items'
                  : 'content_right_list_item'
              "
              @click="clickPaixu(i, item)"
            >
              <p>{{ item.title }}</p>
              <img src="../../assets/img/lists.png" alt="" />
              <p class="content_right_list_unread" v-if="item.times == 0"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="content_bom" v-if="type != 3">底部</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
      list: null,
      active: 0,
      videoUrl: "",
      videoPauseShow: true,
      content: "",
      token: "",
    };
  },
  created() {
    this.type = this.$route.query.index;

    this.getData();
  },
  mounted() {},
  methods: {
    clickPaixu(index, data) {
      console.log(index);
      let _self = this;
      _self.active = index;
      if (data.content) {
        _self.content = data.content;
      }
      if (data.mv) {
        _self.videoUrl = "";
        setTimeout(() => {
          _self.videoUrl = data.mv;
        }, 200);
      }
    },
    videoPlay() {
      //点击播放视屏
      let _self = this;
      _self.videoPauseShow = false;
      _self.$refs.myVideo.play();
    },
    videoPause() {
      let _self = this;
      _self.videoPauseShow = true;
      _self.$refs.myVideo.pause();
    },
    getData() {
      let _self = this;
      let url = "/list";
      // 请求参数
      let data = {
        page: 1,
        limit: 10,
        type: _self.type,
      };
      _self.$axios
        .post(url, data)
        .then((res) => {
          _self.list = res.data.data;
          if (res.data.data[0].mv) {
            _self.videoUrl = res.data.data[0].mv;
          }
          if (res.data.data[0].content) {
            _self.content = res.data.data[0].content;
          }
          console.log(_self.list);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.content {
  width: 100vh;
  height: 100vw;
  background: #000;
  transform: rotate(90deg);
  transform-origin: 50vw 50vw;
  background-size: 100%;
  display: grid;
  background-image: url("../../assets/img/gushi_back.png");
}
.content_top {
  display: flex;
  height: 90vw;
  width: 100vh;
}
.content_txt {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/content_back.png");
  background-size: 100% 100%;
  margin-top: 0.8rem;
  padding: 0.5rem;
  color: #1bc7e6;
  font-size: 0.18rem;
  line-height: 0.5rem;
}
.content_left {
  flex: 8;
  text-align: center;
  position: relative;
}
.content_left_tit {
  width: 90%;
  height: 0.6rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-image: url("../../assets/img/detail_top.png");
  background-size: 100%;
}
.video_play {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video_play > img:nth-child(1) {
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.video_play > img:nth-child(2) {
  margin-top: 1rem;
  width: 8rem;
  height: 5rem;
}
.content_right {
  flex: 2;
  box-shadow: 10px #1bc7e6;
}
.content_right_tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url("../../assets/img/list_tit_back.png");
  background-size: 100% 100%;
  color: #fff;
  font-weight: bold;
  padding: 0.3rem;
  font-size: 0.16rem;
}
.content_right_tit > img {
  width: 0.25rem;
  height: 0.25rem;
}
.content_right_list {
  background-image: url("../../assets/img/list_back.png");
  background-size: 100% 100%;
  height: 100%;
  padding: 0.35rem;
}
.content_right_list_item {
  padding: 0.2rem 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1bc7e6;
  font-weight: bold;
  font-size: 0.16rem;
  box-shadow: rgb(11, 234, 235) 0px 0px 10px inset;
  margin-bottom: 10px;
}
.content_right_list_items {
  padding: 0.2rem 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ff434f;
  font-weight: bold;
  font-size: 0.16rem;
  box-shadow: #ff434f 0px 0px 10px inset;
  margin-bottom: 10px;
}
.content_right_list_item > img,
.content_right_list_items > img {
  width: 0.3rem;
  height: 0.17rem;
}
.content_right_list_unread {
  width: 8px!important;
  height: 8px!important;
  border-radius: 50%;
  background: #ff890a;
}
</style>
